<template>
	<view class="wrap">
		<view class="search-bar">
			<view class="search-bar-inp">
				<input v-model.trim="keywords" placeholder="搜索人名/组名" placeholder-style="color:#ccc" type="text" value=""
					confirm-type="search" @confirm="searchFuc" :focus="focusState" @blur="focusState = false" />
				<view v-if="keywords" @click="searchClear">
					<uni-icons size="16" color="#999999" type="clear"></uni-icons>
				</view>
				<view class="btn" @click="searchFuc" v-else>
					<uni-icons size="22" color="#0091ff" type="search"></uni-icons>
				</view>
			</view>
		</view>
		<memberTree v-if="data.length" :selectIds="selectIds" :selectGroup="selectGroup" :tree="data"
			@node-click="nodeClick">
		</memberTree>
		<view v-else class="empty">
			<view class="circle">
				<image src="@/static/images/default.png"></image>
			</view>
			<view class="title">
				~暂无相关数据~
			</view>
		</view>
	</view>
</template>

<script>
import memberTree from '@/components/member-tree/member-tree.vue';
import { getMembers } from '@/apis/building.js';
import { delRepeat } from '@/utils/tools.js';
export default {
	components: { memberTree },
	data() {
		return {
			// 默认不获取焦点
			focusState: false,
			keywords: '',
			tree: [],
			data: [],
			selectIds: '',
			selectGroup: ''
		};
	},
	created() {
		uni.showLoading({
			title: '加载中',
			mask: true
		});

		uni.getStorage({
			key: 'statistical',
			success: res => {
				this.selectIds = res.data.id;
				let selectGroup = res.data.id;
				if (res.data.groupList) {
					let arr = [];
					for (let i = 0; i < res.data.groupList.length; i++) {
						arr.push(res.data.groupList[i].id);
					}
					selectGroup = arr.join(',');
				}
				this.selectGroup = selectGroup;
			}
		});

		getMembers().then(res => {
			this.tree = res.data;
			this.data = JSON.parse(JSON.stringify(this.tree));
			this.data.forEach((data, index) => {
				if (index == 0) {
					data.show = true;
				}
			});
			uni.hideLoading();
		});
	},
	methods: {
		// 清空搜索
		searchClear() {
			this.keywords = '';
			this.data = JSON.parse(JSON.stringify(this.tree));
			this.data.forEach((data, index) => {
				if (index == 0) {
					data.show = true;
				}
			});
			this.$nextTick(() => {
				this.focusState = true;
			});
		},
		// 搜索
		searchFuc() {
			if (this.keywords === '') {
				this.data = JSON.parse(JSON.stringify(this.tree));
			} else {
				this.data = this.filterTree(JSON.parse(JSON.stringify(this.tree)), this.keywords);
			}
		},
		// 点击每一项
		nodeClick(res) {
			console.log('nodeClick', res);
			if (res.type == 2 || res.showTotal) {
				// type2 ==>人员  showTotal==>组
				this.toDetail(res);
			}
		},
		// 前往统计详情
		toDetail(res) {
			console.log(res,'看看人员选择');
			let obj = {};
			if (res.showTotal) {
				let mbs = this.getMemberIds(res.parent.children, []);
				// 第一级组列表 
				let groups = this.getGroups(res.parent.children, res.id);

				mbs = delRepeat(mbs);
				for (let i = 0; i < groups.length; i++) {
					groups[i].children = delRepeat(groups[i].children, 'id');
				}
				// 组维度 查找全部人员id
				obj = {
					id: mbs.join(','),
					groupList: groups,
					title: res.parent.title,
					groupId: res.parent.id,
					
				};
			} else {
				// 人员维度
				obj = {
					id: res.id,
					title: res.title,
					groupId: res.parent.id
				};
			}
			// return
			uni.setStorage({
				key: 'statistical',
				data: obj,
				success: () => {
					// eslint-disable-next-line vue/custom-event-name-casing
					uni.navigateBack();
					uni.$emit('setDatas', {});
				}
			});
			console.log('前往统计详情', obj);
		},
		// 获取第一级组列表
		getGroups(list, groupId) {
			let arr = [];
			let other = {
				id: groupId,
				type: 1,
				name: '未分组',
				children: []
			};
			for (let i = 0; i < list.length; i++) {
				if (list[i].type == 1) {
					arr.push({
						id: list[i].id,
						name: list[i].title,
						type: 1,
						children: this.getMemberList(list[i].children || [], [])
					});
				} else {
					other.children.push({
						id: list[i].id,
						name: list[i].title,
						type: 2
					});
				}
			}
			if (other.children.length) {
				arr.push(other);
			}
			return arr;
		},
		getMemberList(nodes, arr) {
			if (nodes && nodes.length) {
				for (let i = 0; i < nodes.length;) {
					if (nodes[i].type == 2) {
						arr.push({
							id: nodes[i].id,
							name: nodes[i].title,
							type: 2
						});
					} else {
						if (nodes[i].children && nodes[i].children.length > 0) {
							arr = arr.concat(this.getMemberList(nodes[i].children, []));
						}
					}
					i++;
				}
			}

			return arr;
		},

		// 递归获取组下所有用户id
		getMemberIds(nodes, arr) {
			if (nodes && nodes.length) {
				for (let i = 0; i < nodes.length;) {
					if (nodes[i].type == 2) {
						arr.push(nodes[i].id);
					} else {
						if (nodes[i].children && nodes[i].children.length > 0) {
							arr = arr.concat(this.getMemberIds(nodes[i].children, []));
						}
					}
					i++;
				}
			}

			return arr;
		},

		// 关键词过滤
		filterTree(nodes, query) {
			// 条件就是节点的title过滤关键字
			let predicate = function (node) {
				return node.title.includes(query);
			};

			// 结束递归的条件
			if (!(nodes && nodes.length)) {
				return [];
			}
			let newChildren = [];
			for (let node of nodes) {
				if (node.children && node.children.length) {
					node.show = true;
				}

				// 一、带父节点     以下两个条件任何一个成立，当前节点都应该加入到新子节点集中
				// 1. 子孙节点中存在符合条件的，即 subs 数组中有值
				// 2. 自己本身符合条件
				let subs = this.filterTree(node.children, query);
				if (predicate(node)) {
					newChildren.push(node);
				} else if (subs && subs.length) {
					node.children = subs;

					newChildren.push(node);
				}

				// 二、不带父节点     以下只需要考虑自身的节点满足条件即可,不用带上父节点
				// if (predicate(node)) {
				// 	newChildren.push(node);
				// 	node.children = this.filterTree(node.children, query);
				// } else {
				// 	newChildren.push(...this.filterTree(node.children, query));
				// }
			}
			return newChildren.length ? newChildren : [];
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f6f6f6;
	color: #333;
	width: 100%;
}

.wrap {
	background-color: #f6f6f6;
	width: 100%;
	min-height: 100vh;

	.empty {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 300rpx;

		.circle {
			width: 64rpx;
			height: 64rpx;
		}

		image {
			width: 64rpx;
			height: 64rpx;
		}

		.title {
			font-size: 26rpx;
			color: #999;
			font-weight: 400;
			margin-top: 10rpx;
		}
	}
}

.search-bar {
	background-color: #fff;
	width: 100%;
	margin-bottom: 16rpx;
	display: flex;

	.search-bar-inp {
		width: 710rpx;
		margin: 24rpx auto;
		background-color: #f6f6f6;
		border-radius: 8rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		input {
			font-size: 26rpx;
			flex: 1;
			padding: 12rpx 28rpx;
		}

		.btn {
			width: 90rpx;
			text-align: center;
			height: auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.searchClear{
			margin-right: 20rpx;
		}
	}
}
</style>
